<div class="shop" ng-if="zm.sidePanels.construction">
  <div class="shop-title">
    <h2>Unholy Construction</h2>
    <button ng-click="zm.closeSidePanels();">Close</button>
  </div>
  <div class="tabs">
    <button ng-click="zm.filterConstruction('available');" class="{{zm.currentConstructionFilter == 'available' ? 'active' : ''}}">Available</button>
    <button ng-click="zm.filterConstruction('completed');" class="{{zm.currentConstructionFilter == 'completed' ? 'active' : ''}}">Completed</button>
    <button ng-if="zm.model.autoconstructionUnlocked" ng-click="zm.model.autoconstruction = !zm.model.autoconstruction" class="{{zm.model.autoconstruction ? 'active' : ''}}">{{zm.model.autoconstruction ? 'Auto On' : 'Auto Off'}}</button>
  </div>
  <div class="upgrade current-construction" ng-if="zm.model.persistentData.currentConstruction">
    <h4>Building - {{zm.model.persistentData.currentConstruction.name}}</h4>
    <p>Consuming 
      <span ng-if="zm.model.persistentData.currentConstruction.costPerTick.energy" class="energy">{{zm.model.persistentData.currentConstruction.costPerTick.energy|decimal}} energy</span> 
      <span ng-if="zm.model.persistentData.currentConstruction.costPerTick.blood" class="blood">{{zm.model.persistentData.currentConstruction.costPerTick.blood|decimal}} blood</span>
      <span ng-if="zm.model.persistentData.currentConstruction.costPerTick.brains" class="brains">{{zm.model.persistentData.currentConstruction.costPerTick.brains|decimal}} brains</span>
      <span ng-if="zm.model.persistentData.currentConstruction.costPerTick.bones" class="bones">{{zm.model.persistentData.currentConstruction.costPerTick.bones|decimal}} bones</span>
      <span ng-if="zm.model.persistentData.currentConstruction.costPerTick.parts" class="parts">{{zm.model.persistentData.currentConstruction.costPerTick.parts|decimal}} parts</span>
      each second
    </p>
    <div class="progress {{zm.model.persistentData.currentConstruction.state == 'building' ? 'active' : 'stopped'}}">
      <div ng-style="{'width':zm.constructionPercent() + '%'}"></div>
      <span>{{zm.constructionPercent()}}%</span>
    </div>
    <p ng-if="!zm.model.persistentData.currentConstruction.shortfall"><strong>Time Remaining: {{zm.model.persistentData.currentConstruction.timeRemaining}}</strong></p>
    <p ng-if="zm.model.persistentData.currentConstruction.shortfall">
      <strong>Production stopped, need more
      <span ng-if="zm.model.persistentData.currentConstruction.shortfall.energy" class="energy">energy</span>
      <span ng-if="zm.model.persistentData.currentConstruction.shortfall.blood" class="blood">blood</span>
      <span ng-if="zm.model.persistentData.currentConstruction.shortfall.brains" class="brains">brains</span>
      <span ng-if="zm.model.persistentData.currentConstruction.shortfall.bones" class="bones">bones</span>
      <span ng-if="zm.model.persistentData.currentConstruction.shortfall.parts" class="parts">parts</span>
      </strong>
    </p>
    <button ng-click="zm.playPauseConstruction();">{{zm.model.persistentData.currentConstruction.state == 'paused' ? 'Resume' : 'Pause'}}</button>
    <button ng-click="zm.cancelConstruction();">Cancel</button>
  </div>
  <div class="upgrades">
    <div ng-repeat="upgrade in zm.upgrades" class="upgrade">
      <h4>{{upgrade.name}}</h4>
      <p>{{upgrade.description}}</p>
      <label ng-if="zm.currentRankConstruction(upgrade) < upgrade.cap">Time to build: {{upgrade.time}} seconds</label>
      <div ng-if="zm.currentRankConstruction(upgrade) < upgrade.cap">
        <label>Total Cost: </label>
        <label ng-if="upgrade.costs.energy" class="energy">{{upgrade.costs.energy|whole}} energy ({{upgrade.costs.energy/upgrade.time|whole}} per sec)</label>
        <label ng-if="upgrade.costs.blood" class="blood">{{upgrade.costs.blood|whole}} blood ({{upgrade.costs.blood/upgrade.time|whole}} per sec)</label>
        <label ng-if="upgrade.costs.brains" class="brains">{{upgrade.costs.brains|whole}} brains ({{upgrade.costs.brains/upgrade.time|whole}} per sec)</label>
        <label ng-if="upgrade.costs.bones" class="bones">{{upgrade.costs.bones|whole}} bones ({{upgrade.costs.bones/upgrade.time|whole}} per sec)</label>
        <label ng-if="upgrade.costs.parts" class="parts">{{upgrade.costs.parts|whole}} parts ({{upgrade.costs.parts/upgrade.time|whole}} per sec)</label>
      </div>
      <label ng-if="zm.constructionLeadsTo(upgrade)">Required for: {{zm.constructionLeadsTo(upgrade)}}</label>
      <p ng-if="zm.currentRankConstruction(upgrade) < upgrade.cap">Current Rank: {{zm.currentRankConstruction(upgrade)}} / {{upgrade.cap}}</p>
      <button ng-click="zm.startConstruction(upgrade);" ng-disabled="zm.model.persistentData.currentConstruction" ng-if="zm.currentRankConstruction(upgrade) < upgrade.cap">Begin Construction</button>
    </div>
  </div>
</div>